<template>
  <div class="rightBottom">
    <div class="title">
      <span class="word">数据健康度分析</span>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="YYYY-MM-DD"
          @change="changetoptime"
          :disabled-date="disableDate"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
    <div class="line"></div>
    <div class="chars">
      <scEcharts
        id="chartDom"
        width="1000px"
        height="250px"
        :option="option"
      ></scEcharts>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import scEcharts from "@/components/scEcharts";
import { ProjectGroupone } from "@/api/model/echarts";
import dayjs from "dayjs";
onMounted(() => {
  getdatabottom();
  // var data1 = JSON.parse(sessionStorage.getItem("data1bot"));
  // var data2 = JSON.parse(sessionStorage.getItem("data2bot"));
  // var daylist = JSON.parse(sessionStorage.getItem("daylistbot"));
  // if (data1) {
  //   option.series[0].data = data1;
  // }
  // if (data2) {
  //   option.series[1].data = data2;
  // }
  // if (daylist) {
  //   option.xAxis.data = daylist;
  // }
});
const value1 = ref();
var option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    x: "right",
    left: "83%",
    top: "0%",
    icon: "rect",
    itemWidth: 30,
    itemHeight: 1,
    data: ["准确率", "掉线率"],
  },
  xAxis: {
    type: "category",

    // data: [
    //   "4/20",
    //   "4/21",
    //   "4/22",
    //   "4/23",
    //   "4/24",
    //   "4/25",
    //   "4/26",
    //   "4/27",
    //   "昨日",
    //   "今日",
    // ],
  },
  yAxis: {
    axisLine: {
      show: true,
    },
    type: "category",
  },
  series: [
    {
      name: "掉线率",
      color: "rgb(249, 195, 0)",
      type: "line",
      stack: "Total",
      // data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
    },
    {
      name: "准确率",
      color: "rgb(207, 0, 0)",
      type: "line",
      stack: "Total",
      // data: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
    },
  ],
});
const changetoptime = (val) => {
  if (val == null) {
    getdatabottom("1900-01-01", "2023-01-02");
  }
  value1.value = val;
  // console.log(moment(val).format('YYYY-MM-DD HH:mm:ss'))
  getdatabottom(val[0], val[1]);
};
const getdatabottom = async (
  start = dayjs().subtract(7, "day").format("YYYY-MM-DD"),
  end = dayjs().format("YYYY-MM-DD")
) => {
  var {data:res} = await ProjectGroupone({
    indicatorName: "数据健康度分析",
    firstType: "项目概述",
    secondType: "",
    projectId: 1,
    type: "day",
    thirdType: "",
    dataType: "day",
    dayFrom: start,
    dayTo: end,
    // project_id: sessionStorage.getItem("proid"),
  });
  console.log(res, "数据健康分析1111111");
  var xlist = [];
  res.data.commonDailyDataList.forEach((item) => {
    item.day = `${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`;
    if (!xlist.includes(item.day)) {
      xlist.push(item.day);
    }
  });
  option.xAxis.data = xlist;
  var type1 = res.data.commonDailyDataList.filter((item) => {
    return item.type == "type1";
  });
  var type2 = res.data.commonDailyDataList.filter((item) => {
    return item.type == "type2";
  });
  var data1 = [];
  var data2 = [];
  type1.forEach((item) => {
    data1.push(item.number1);
  });
  type2.forEach((item) => {
    data2.push(item.number1);
  });
  option.series[0].data = data1;
  option.series[1].data = data2;
  // console.log(res,'bottom')
};
const disableDate = (time) => {
  return time.getTime() > Date.now();
};
</script>

<style scoped lang="less">
.rightBottom {
  width: 100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 0px;
  line-height: 20px;
  font-weight: normal;
  background-color: white;
  margin-top: 10px;
  font-style: normal;
  .title {
    padding: 20px;
    display: flex;
    position: relative;
    position: relative;
    justify-content: space-between;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  .chars {
    padding-top: 15px;
  }
}
</style>
